<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, getCurrentInstance } from 'vue'
	import { getFutureDate, parseTime } from '@/utils/common'
	const instance = getCurrentInstance().proxy
	import { getAddressList, getCouponList } from '@/api/user'
	import { getCarSpecial, getDeviceGoods, createDeposit, createSeckill, computeShopCar, getOrderList } from '@/api/shop'
	import { useUserStore } from '@/store/user'
	
	const user = useUserStore()
	const loading = ref(false)
	const navList = [{name: '司机配送'}, {name: '买家自提', disabled: true}]
	const navIndex = ref(0)
	const startTime = new Date(getFutureDate(1, '{y}-{m}-{d} {h}:{i}')).getTime()
	const specialId = ref('')
	const form = ref({
		areaId: user.addressIds[2],
		type: 'DISHES',
		addrId: '',
		addrName: '',
		addr: '',
		expectedTime: getFutureDate(1, '{y}-{m}-{d} {h}:{i}'),
		goodsList: [],
		couponIds: '',
		couponAmount: 0,
		total: 0,
		serviceCharge: 0,
		foodSubDeviceAmount: 0,
		associateCode: '',
		remark: '',
		payAmount: 0,
		depositAmount: 0
	})
	const couponPopup = ref(null)
	const navCouponList = [{name: '可使用'}, {name: '不可使用'}]
	const navCouponIndex = ref(0)
	const navCouponShow = ref(false)
	const couponName = ref('')
	const couponQuery = ref({used: 0, expire: 0, current: 1, size: 20})
	const couponTrig = ref(false)
	const couponTotal = ref(0)
	const couponList = ref([])
	const timePicker = ref(null)
	const associatePopup = ref(null)
	const associateQuery = ref({current: 1, size: 20})
	const associateTrig = ref(false)
	const associateTotal = ref(0)
	const associateList = ref([])
	
	function navChange(e) {
		let index = e.index
		navIndex.value = index
	}
	function getDefaultArea() {
		getAddressList().then(res => {
			let result = res.result || []
			let address = result.find(item => item.defaultAddress)
			if(!address && result.length) address = result[0]
			if(address) {
				form.value.addrId = address.addrId
				form.value.addrName = address.orgName
				form.value.addr = address.addr
			}
		})
	}
	function areaChange() {
		if(loading.value) return
		let id = form.value.addrId
		let params = `?type=select&id=${id}`
		uni.navigateTo({
			url: '/pages/user/addressList' + params,
			events: {
				selectAddress: (data) => {
					form.value.addrId = data.addrId
					form.value.addrName = data.orgName
					form.value.addr = data.addr
				}
			}
		})
	}
	function timeChange(e) {
		if(loading.value) return
		form.value.expectedTime = parseTime(e.value, '{y}-{m}-{d} {h}:{i}')
	}
	function formatter(type, value) {
		if (type === 'year') {
			return `${value}年`
		}
		if (type === 'month') {
			return `${value}月`
		}
		if (type === 'day') {
			return `${value}日`
		}
		if (type === 'hour') {
			return `${value}时`
		}
		if (type === 'minute') {
			return `${value}分`
		}
		return value
	}
	function couponChange() {
		if(loading.value) return
		couponPopup.value.open()
		refreshCoupon()
		setTimeout(() => {
			navCouponShow.value = true
		}, 400)
	}
	function navCouponChange(e) {
		let index = e.index
		navCouponIndex.value = index
		refreshCoupon()
	}
	function refreshCoupon() {
		loading.value = true
		couponTrig.value = true
		couponList.value = []
		couponQuery.value.current = 1
		getCouponList(couponQuery.value).then(res => {
			let result = res.result || {}
			let data = (result.records || []).filter(item => {
				if(navCouponIndex.value === 0) return form.value.payAmount >= item.useCondition
				else return form.value.payAmount < item.useCondition
			})
			data.forEach(item => item.expand = false)
			couponTotal.value = Number(result.total)
			couponList.value = data
			couponTrig.value = false
			loading.value = false
		}).catch(() => {
			couponTrig.value = false
			loading.value = false
		})
	}
	function lowerCoupon() {
		if(couponList.value.length < couponTotal.value){
			loading.value = true
			couponQuery.value.current ++
			getCouponList(couponQuery.value).then(res => {
				let result = res.result || {}
				let data = (result.records || []).filter(item => {
					if(navCouponIndex.value === 0) return form.value.payAmount >= item.useCondition
					else return form.value.payAmount < item.useCondition
				})
				data.forEach(item => item.expand = false)
				couponTotal.value = Number(result.total)
				couponList.value.push(...data)
				loading.value = false
			}).catch(() => {
				couponQuery.value.current --
				loading.value = false
			})
		}
	}
	function closeCoupon() {
		couponName.value = ''
		form.value.couponIds = ''
		computePrice()
		couponPopup.value.close()
	}
	function selectCouponChange(name) {
		let curCoupon = couponList.value.find(item => item.couponId === name)
		if(curCoupon) {
			couponName.value = curCoupon.couponName
			form.value.couponIds = curCoupon.itemId
			computePrice()
		}
		couponPopup.value.close()
	}
	function computePrice() {
		loading.value = true
		let data = dealData()
		computeShopCar(data).then(res => {
			loading.value = false
			let result = res.result || {}
			form.value.total = result.totalOriginal
			form.value.couponAmount = result.couponAmount
			form.value.foodSubDeviceAmount = result.foodSubDeviceAmount
			form.value.payAmount = result.totalPay
			form.value.depositAmount = result.depositAmount
		}).catch(() => loading.value = false)
	}
	function changeDetailExpand(item) {
		if(item.cartId && !item.children) {
			if(item.type === 'DISHES') {
				getCarSpecial(item.cartId).then(res => {
					let result = res.result || []
					item.children = result.map(food => {
						return {
							id: food.goodsId,
							name: food.info.goodsName || '',
							furl: food.info.img && food.info.img.furl,
							price: food.info.price || 0,
							number: food.num
						}
					})
					item.expand = !item.expand
				})
			} else if(item.type === 'DEVICE') {
				getDeviceGoods(item.id, user.addressIds[2]).then(res => {
					let result = res.result || {}
					let data = result.devices || []
					item.children = data.map(device => {
						return {
							id: device.deviceId,
							name: device.deviceName || '',
							furl: device.image && device.image.furl,
							price: device.price || 0,
							number: device.quantity
						}
					})
					item.expand = !item.expand
				}).catch(() => loading.value = false)
			}
		} else {
			item.expand = !item.expand
		}
	}
	function changeExpand(item) {
		item.expand = !item.expand
	}
	function goPay() {
		if(!form.value.addrId) {
			uni.showToast({icon: 'none', title: '请选择快递地址'})
			return
		}
		if(form.value.serviceCharge === undefined || form.value.serviceCharge === '') {
			uni.showToast({icon: 'none', title: '请输入乡厨服务费'})
			return
		}
		loading.value = true
		let data = dealData()
		if(data.type === 'INTEGRAL') {
			data.price = form.value.payAmount
		}
		if(data.type === 'SPECIAL') {
			data.specialId = specialId.value
			data.goodsId = list[0].goodsId
			delete data.list
		}
		payRequest(data).then(res => {
			loading.value = false
			let result = res.result
			let info = {
				status: 1,
				addrName: navIndex.value === 0? form.value.addrName : '茗山总仓（某某小学附近）',
				addr: navIndex.value === 0? form.value.addr : '四川省雅安市茗山区前进镇桥楼村99号',
				expectedTime: form.value.expectedTime,
				logisticsType: navIndex.value === 0 ? 2 : 4
			}
			// 有支付走微信支付，没有表示用的是积分支付
			if(result) {
				if(result.type === 'NotNeedPay') {
					uni.redirectTo({
						url: '/pages/shop/orderAll?status=1',
					})
				}
				else pay(result, info)
			} else {
				info.status = 2
				let params = JSON.stringify(info)
				uni.redirectTo({
					url: '/pages/shop/orderPay?params='+ params,
				})
				user.getInfoAction()
			}
		}).catch(() => loading.value = false)
	}
	function payRequest(params) {
		if(params.type === 'SPECIAL') return createSeckill(params)
		else return createDeposit(params)
	}
	function pay(data, info) {
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: data.timeStamp,
			nonceStr: data.nonceStr,
			package: data.packageVal,
			signType: data.signType,
			paySign: data.paySign,
			success: (data) => {
				info.status = 2
				let params = JSON.stringify(info)
				uni.redirectTo({
					url: '/pages/shop/orderPay?params='+ params,
				})
			},
			fail: (err) => {
				let params = JSON.stringify(info)
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/shop/orderPay?params='+ params,
					})
				}, 1000)
			},
			complete: () => {
				user.shopCarAction(false)
			}
		})
	}
	function dealData() {
		let list = []
		form.value.goodsList.forEach(item => {
			let newItem = {
				cartId: item.cartId,
				goodsId: item.id,
				num: item.number,
				type: item.type
			}
			if(!item.cartId && item.children) {
				let children = item.children.map(child => {
					return {
						goodsId: child.id,
						num: child.number
					}
				})
				newItem.list = children
			}
			list.push(newItem)
		})
		return {
			type: form.value.type,
			remark: form.value.remark,
			couponIds: form.value.couponIds,
			logisticsType: navIndex.value === 0 ? 2 : 4,
			expectedTime: form.value.expectedTime,
			list,
			areaId: form.value.areaId,
			addrId: form.value.addrId,
			addrName: form.value.addrName,
			serviceCharge: form.value.serviceCharge,
			associateCode: form.value.associateCode,
		}
	}
	function serviceChange(value) {
		form.value.serviceCharge = value
		computePrice()
	}
	function scanQrcode() {
		uni.scanCode({
			scanType: ['qrCode'],
			success: (res) => {
				form.value.associateCode = res.result
			}
		})
	}
	function associateChange() {
		if(loading.value) return
		associatePopup.value.open()
		refreshAssociate()
	}
	function refreshAssociate() {
		loading.value = true
		associateTrig.value = true
		associateList.value = []
		associateQuery.value.current = 1
		getOrderList(associateQuery.value).then(res => {
			let result = res.result || {}
			let data = result.records || []
			associateTotal.value = Number(result.total)
			associateList.value = data
			associateTrig.value = false
			loading.value = false
		}).catch(() => {
			associateTrig.value = false
			loading.value = false
		})
	}
	function lowerAssociate() {
		if(associateList.value.length < associateTotal.value){
			loading.value = true
			associateQuery.value.current ++
			getOrderList(associateQuery.value).then(res => {
				let result = res.result || {}
				let data = result.records || []
				associateTotal.value = Number(result.total)
				associateList.value.push(...data)
				loading.value = false
			}).catch(() => {
				associateQuery.value.current --
				loading.value = false
			})
		}
	}
	function statusToText(value) {
		switch(value) {
			case 0: return '已关闭';
			case 1: return '待付押金';
			case 2: return '待受理';
			case 3: return '待分拣';
			case 4: return '待出库';
			case 5: return '待发货';
			case 6: return '待收货';
			case 7: return '待确认';
			case 8: return '待付尾款';
			case 9: return '已完成';
			default: return '未知'
		}
	}
	function salesToText(value) {
		switch(value) {
			case 1: return '售后中';
			case 2: return '售后通过';
			case 3: return '售后驳回';
			default: return '未知'
		}
	}
	function associateSelect(name){
		form.value.associateCode = name
		associatePopup.value.close()
	}
	
	onLoad((option) => {
		specialId.value = option.id || ''
		const eventChannel = instance.getOpenerEventChannel()
		eventChannel.on('orderConfirm', res => {
			let data = res || {}
			let list = data.list || []
			if(res.type) {
				form.value.type = res.type
			} else {
				list.forEach(item => {
					item.expand = false
					if(item.type) form.value.type = item.type
				})
			}
			form.value.goodsList = list || []
			computePrice()
		})
		getDefaultArea()
	})
</script>

<template>
	<view class="app-container">
		<view class="app-content">
			<view class="app-head">
				<uv-tabs :list="navList" :current="navIndex" :activeStyle="{color: '#1A1816', fontWeight: 'bold'}" :inactiveStyle="{color: '#606060'}"  @change="navChange" lineWidth="60" :lineHeight="6" lineColor="#FF3E49" :scrollable="false"></uv-tabs>
			</view>
			<template v-if="navIndex === 0">
				<view class="box-view mg-top">
					<view class="info-row">
						<view class="lable">快递地址：</view>
						<view class="value flex-end text-red" @click="areaChange">
							<text>{{form.addrId? '切换' : '请选择'}}</text>
							<uv-icon name="arrow-right" color="#FD1024" size="30" bold />
						</view>
					</view>
					<view class="text-no mg-top" v-if="form.addrId">{{form.addrName + form.addr}}</view>
				</view>
				<view class="box-view mg-top">
					<view class="info-row">
						<view class="lable">期望送达时间：</view>
						<view class="value flex-end text-red" @click="timePicker.open()">
							<text :class="form.expectedTime? '' : 'text-no'">{{form.expectedTime? form.expectedTime : '请选择期望送达时间'}}</text>
							<uv-icon name="arrow-right" color="#FD1024" size="30" bold />
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="box-view mg-top">
					<view class="box-title">自提地址：茗山总仓（某某小学附近）</view>
					<view class="text-no mg-top">四川省雅安市茗山区前进镇桥楼村99号</view>
				</view>
			</template>
			<view class="box-view mg-top mg-bot">
				<view class="info-row">
					<view class="lable">商品信息</view>
					<view class="value flex-end">
						<text class="text-no">共{{form.goodsList && form.goodsList.length? form.goodsList.length : 0}}件</text>
					</view>
				</view>
				<view class="good-list">
					<view v-for="item in form.goodsList" :key="item.id" class="good-box">
						<goods v-model="item.number" :img="item.furl" :name="item.name" :price="item.price" :specs="item.specs" 
							:mode="item.type === 'INTEGRAL'? 'viewP' : 'viewM'"></goods>
						<view class="goods-detail" v-if="item.type === 'DISHES' || item.type === 'DEVICE'">
							<template v-if="item.children && item.children.length">
								<view class="goods-detail-box" v-if="item.expand">
									<view class="goods-detail-item" v-for="child in item.children" :key="child.id">
										<goods v-model="child.number" :img="child.furl" :name="child.name" :price="child.price" :specs="child.specs" mode="viewD"
											v-if="child.name"></goods>
										<goods v-model="child.number" mode="invalidD" v-else></goods>
									</view>
								</view>
							</template>
							<view class="goods-detail-expand" @click="changeDetailExpand(item)">
								<text class="more-text">{{ item.expand? '收起' : '查看明细详情'}}</text>
								<uv-icon :name="item.expand? 'arrow-up-fill' : 'arrow-down-fill'" color="#4E5969" size="24"></uv-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box-view mg-top mg-bot" v-if="form.type === 'COMBINATION'">
				<view class="info-row">
					<view class="lable">乡厨服务费 <text class="text-red">*</text></view>
					<view class="value flex-end text-red">
						<uv-input type="number" v-model="form.serviceCharge" placeholder="请输入服务费" border="none" inputAlign="right" maxlength="8" clearable 
							color="#FD1024" @input="serviceChange" />
					</view>
				</view>
			</view>
			<view class="box-view">
				<view class="info-row">
					<view class="lable">商品总额</view>
					<view class="value flex-end">
						<text class="text-points" v-if="form.type === 'INTEGRAL'">{{form.total || 0}}</text>
						<text class="text-price" v-else>{{form.total? form.total.toFixed(2) : '0.00'}}</text>
					</view>
				</view>
			</view>
			<view class="box-view" v-if="form.type === 'COMBINATION'">
				<view class="info-row">
					<view class="lable">餐车优惠</view>
					<view class="value flex-end text-red">
						-<text class="text-price">{{form.foodSubDeviceAmount? form.foodSubDeviceAmount.toFixed(2) : '0.00'}}</text>
					</view>
				</view>
			</view>
			<view class="box-view" v-if="form.type != 'INTEGRAL'">
				<view class="info-row">
					<view class="lable">优惠券</view>
					<view class="value flex-end" @click="couponChange">
						<text :class="form.couponIds? '' : 'text-no'">{{form.couponIds? couponName : '请选择'}}</text>
						<uv-icon name="arrow-right" color="#767473" size="30" bold />
					</view>
				</view>
			</view>
			<view class="box-view" v-if="form.type != 'INTEGRAL'">
				<view class="info-row">
					<view class="lable">商品优惠</view>
					<view class="value flex-end text-red">
						-<text class="text-price">{{form.couponAmount? form.couponAmount.toFixed(2) : '0.00'}}</text>
					</view>
				</view>
			</view>
			<view class="box-view">
				<view class="info-row">
					<view class="lable">关联订单</view>
					<view class="value flex-end">
						<text>{{form.associateCode || ''}}</text>
						<view class="flex">
							<!-- <uv-icon name="arrow-down" color="#303133" size="30" @click="associateChange" /> -->
							<uv-icon name="scan" color="#303133" size="40" @click="scanQrcode" />
						</view>
					</view>
				</view>
			</view>
			<view class="box-view">
				<view class="info-row">
					<view class="lable">备注</view>
					<view class="value">
						<uv-input v-model="form.remark" placeholder="请输入备注" border="none" inputAlign="right" maxlength="20" clearable />
					</view>
				</view>
			</view>
		</view>
		<view class="app-bottom">
			<view class="bottom-total">
				<text>待支付：</text>
				<text class="text-points" v-if="form.type === 'INTEGRAL'">{{form.payAmount || 0}}</text>
				<text class="text-price" v-else-if="form.associateCode">{{form.payAmount? form.payAmount.toFixed(2) : 0.00}}</text>
				<text class="text-price" v-else>{{form.depositAmount? form.depositAmount.toFixed(2) : 0.00}}</text>
			</view>
			<uv-button color="linear-gradient(102deg, #FA3F00 0%, #FF7445 100%)" :custom-style="{width: '200rpx'}" shape="circle" @click="goPay"
				:text="form.type === 'INTEGRAL'? '立即支付' : form.associateCode? '确认关联订单' : '支付押金'"
				:disabled="loading || form.total < 1000 && !form.associateCode">
			</uv-button>
		</view>
		
		<uv-popup ref="couponPopup" closeable mode="bottom" round="32">
			<view class="popup-box">
				<view class="popup-title">优惠券</view>
				<view class="popup-content">
					<uv-tabs :list="navCouponList" :current="navCouponIndex" :activeStyle="{color: '#1A1816', fontWeight: 'bold'}" :inactiveStyle="{color: '#606060'}"
						@change="navCouponChange" lineWidth="60" :lineHeight="6" lineColor="#FF3E49" :scrollable="false" v-if="navCouponShow"></uv-tabs>
					<scroll-view scroll-y="true" class="popup-content-center" refresher-enabled :refresher-triggered="couponTrig" @refresherrefresh="refreshCoupon" lower-threshold="10" @scrolltolower="lowerCoupon">
						<uv-radio-group v-model="form.couponIds" placement="column" iconPlacement="right" size="32" iconSize="32" activeColor="#FA3F00" 
							v-if="couponList.length" @change="selectCouponChange">
							<view class="content-list">
								<view :class="['list-box', navCouponIndex == 1? 'disabled' : '']" v-for="item in couponList" :key="item.couponId">
									<uv-radio :name="item.couponId" :disabled="navCouponIndex == 1">
										<view class="content-info">
											<view class="info-left">
												<view class="price">{{item.amount || 0}}</view>
												<view class="condition" v-if="item.useCondition">满{{item.useCondition}}可用</view>
												<view class="condition" v-else>无门槛</view>
											</view>
											<view class="info-center">
												<view class="name">{{item.couponName}}</view>
												<view class="data">{{parseTime(item.beginTime, '{y}.{m}.{d}') || ''}}-{{parseTime(item.endTime, '{y}.{m}.{d}') || ''}}</view>
											</view>
										</view>
									</uv-radio>
									<view class="content-remake" v-if="item.remark">
										<view class="remake-des" :class="item.expand? '' : 'uv-line-1'">{{item.remark || '--'}}</view>
										<uv-icon :name="item.expand? 'arrow-up' : 'arrow-down'" color="#727687" size="30" @click="changeExpand(item)" 
											v-if="item.remark &&item.remark.length > 30 " />
									</view>
								</view>
							</view>
						</uv-radio-group>
						<empty :text="'没有找到' + navCouponList[navCouponIndex].name + '优惠券'" v-else></empty>
					</scroll-view>
				</view>
				
				<view class="popup-bottom">
					<uv-button color="linear-gradient(102deg, #FA3F00 0%, #FF7445 100%)" shape="circle" text="不使用优惠券" :disabled="loading" 
						@click="closeCoupon"></uv-button>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="associatePopup" closeable mode="bottom" round="32">
			<view class="popup-box">
				<view class="popup-title">全部订单</view>
				<view class="popup-content">
					<scroll-view scroll-y="true" class="popup-content-associate" refresher-enabled :refresher-triggered="associateTrig" @refresherrefresh="refreshAssociate" lower-threshold="10" @scrolltolower="lowerAssociate">
						<uv-radio-group v-model="form.associateCode" placement="column" iconPlacement="right" size="32" iconSize="32" activeColor="#FA3F00"
							v-if="associateList.length" @change="associateSelect">
							<view class="content-list">
								<view class="list-box" v-for="item in associateList" :key="item.orderId">
									<uv-radio :name="item.associateCode">
										<view style="margin-right: 24rpx;">
											<view class="head">
												<view class="head-left">{{item.createTime}}</view>
												<view class="head-right">
													<view v-if="item.saleStatus" class="tag" :class="'sale-' + item.saleStatus">{{salesToText(item.saleStatus)}}</view>
													<view v-else class="tag" :class="'tag-' + item.status">{{statusToText(item.status)}}</view>
												</view>
											</view>
											<template v-if="item.type === 'ACTIVITY'">
												<view class="activity" v-if="item.list">
													{{item.list[0]?.name }}
												</view>
											</template>
											<template v-else>
												<view class="list" v-if="item.list">
													<uv-image v-for="goods in item.list" :key="goods.goodsId" :src="goods.image && goods.image.furl" width="128"
														height="128"></uv-image>
													<view class="list-more">
														<text>共{{item.list.length || 0}}件</text>
														<uv-icon name="arrow-right" color="#000000" size="24" />
													</view>
												</view>
											</template>
											<view class="bottom">
												<view class="code">编号：{{item.associateCode || '--'}}</view>
												<view class="total">
													<text>实付款</text>
													<text class="total-points" v-if="item.type === 'INTEGRAL'">{{item.payAmount || 0}}</text>
													<text class="total-price" v-else>{{item.payAmount ? item.payAmount.toFixed(2) : 0.00}}</text>
												</view>
											</view>
										</view>
									</uv-radio>
								</view>
							</view>
						</uv-radio-group>
						<empty text="没有找到您的订单" v-else></empty>
					</scroll-view>
				</view>
			</view>
		</uv-popup>
		<uv-datetime-picker ref="timePicker" title="期望送达时间" :value="form.expectedTime" mode="datetime" visibleItemCount="8" :minDate="startTime" 
			:formatter="formatter" @confirm="timeChange"></uv-datetime-picker>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 2rpx;
		padding-bottom: 112rpx;
		.app-content{
			.app-head{
				background-color: #FFFFFF;
			}
			.box-view{
				padding: 24rpx;
				background-color: #FFFFFF;
				.text-no{
					color: #767473;
				}
				.box-title{
					font-weight: 600;
				}
				.good-list{
					margin-top: 24rpx;
					display: flex;
					flex-direction: column;
					gap: 16rpx;
					.good-box{
						background-color: #FAF7F7;
						border-radius: 8rpx;
						padding: 16rpx;
					}
				}
			}
			.info-row{
				display: flex;
				align-items: center;
				gap: 8rpx;
				.lable{
					flex-shrink: 0;
					font-weight: 600;
				}
				.value{
					flex: 1;
				}
				.flex-end{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					gap: 10rpx;
				}
				.flex{
					display: flex;
					align-items: center;
					gap: 10rpx;
				}
				.text-red{
					color: #FD1024;
				}
				.text-points{
					font-weight: 600;
					&::after{
						content: "积分";
					}
				}
				.text-price{
					font-weight: 600;
					&::before{
						content: "¥";
						font-size: 60%;
					}
				}
			}
			.mg-top{
				margin-top: 16rpx;
			}
			.mg-bot{
				margin-bottom: 16rpx;
			}
			.goods-detail {
				border-top: 2rpx solid #EAEAEA;
				font-size: 28rpx;
				.goods-detail-box{
					padding: 16rpx 0;
					display: flex;
					flex-direction: column;
					gap: 16rpx;
				}
				.goods-detail-expand {
					padding-top: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 20rpx;
					color: #767473;
				}
				.goods-detail-box + .goods-detail-expand{
					border-top: 2rpx solid #EAEAEA;
				}
			}
		}
		.app-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 10;
			height: 112rpx;
			padding: 16rpx 24rpx;
			background-color: #FFFFFF;
			border-top: 2rpx solid #D7DBE1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 32rpx;
			font-weight: 600;
			.text-price{
				color: #FF0D0D;
				font-size: var(--theme-lg);
				line-height: var(--theme-lg-line);
				&::before{
					content: "¥";
					font-size: 60%;
				}
			}
			.text-points{
				color: #FF0D0D;
				font-size: var(--theme-lg);
				line-height: var(--theme-lg-line);
				&::after{
					content: "积分";
				}
			}
		}
		.popup-box{
			width: 100%;
			min-height: 600rpx;
			background: linear-gradient( 180deg, #F9EBE7 0%, #FFFFFF 24%);
			.popup-title{
				padding: 24rpx 0 16rpx;
				font-weight: 600;
				font-size: var(--theme-lg);
				line-height: var(--theme-lg-line);
				text-align: center;
			}
			.popup-content-center{
				height: 760rpx;
				.content-list{
					padding: 24rpx;
					display: flex;
					flex-direction: column;
					gap: 16rpx;
					.list-box{
						padding: 0 24rpx;
						background-color: #FEF3F1;
						border: 2rpx solid #FFFFFF;
						border-radius: 16rpx;
						&.disabled{
							background-color: #F5F3F2;
							color: #877872;
							.price{
								color: #877872 !important;
							}
							.condition{
								color: #877872 !important;
							}
						}
					}
				}
				.content-info{
					padding: 24rpx 0;
					display: flex;
					align-items: center;
					gap: 24rpx;
					.info-left{
						width: 138rpx;
						text-align: center;
						.price{
							font-weight: 600;
							font-size: 40rpx;
							line-height: var(--theme-lg-line);
							color: #FF0D0D;
							&::before{
								content: "¥";
								font-size: 60%;
							}
						}
						.condition{
							margin-top: 4rpx;
							color: #FF0D0D;
							font-size: var(--theme-sm);
							line-height: var(--theme-sm-line);
						}
					}
					.info-center{
						width: calc(100% - 162rpx);
						.name{
							font-weight: 600;
							font-size: var(--theme-lg);
							line-height: var(--theme-lg-line);
						}
						.data{
							margin-top: 12rpx;
							color: #877872;
							font-size: var(--theme-sm);
							line-height: var(--theme-sm-line);
						}
					}
				}
				.content-remake{
					padding: 24rpx 0;
					display: flex;
					align-items: flex-end;
					gap: 40rpx;
					border-top: 2rpx dashed #F8DAD4;
					.remake-des{
						width: calc(100% - 70rpx);
						color: #877872;
						font-size: var(--theme-sm);
						line-height: var(--theme-sm-line);
					}
				}
			}
			.popup-content-associate{
				height: 760rpx;
				.content-list{
					padding: 24rpx;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					gap: 16rpx;
					.list-box{
						padding: 24rpx 24rpx 24rpx 18rpx;
						background-color: #FEF3F1;
						border: 2rpx solid #FFFFFF;
						border-radius: 16rpx;
					}
					.head{
						display: flex;
						justify-content: space-between;
						align-items: center;
						gap: 16rpx;
						color: #606060;
						.head-left{
							flex: 1;
						}
						.head-right{
							flex-shrink: 0;
							.tag{
								background-color: #F7F8FA;
								color: #7c8088;
								padding: 4rpx 12rpx;
								border-radius: 4rpx;
								&.tag-2, &.tag-3,&.tag-4,&.tag-5,&.tag-6,&.tag-8, &.sale-3{
									background-color: rgba(255,118,64,0.1);
									color: #FF7640;
								}
								&.tag-7, &.tag-9, &.sale-2{
									background-color: rgba(16,176,45,0.1);
									color: #10B02D;
								}
							}
						}
					}
					.list{
						margin-top: 28rpx;
						display: flex;
						gap: 16rpx;
						position: relative;
						overflow: hidden;
						.list-more{
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							z-index: 10;
							width: 104rpx;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							background-image: url('https://erp-1307466921.cos.ap-shanghai.myqcloud.com/2025/07/1948649435561930752.png');
							font-size: var(--theme-sm);
							line-height: var(--theme-sm-line);
						}
					}
					.activity{
						margin-top: 16rpx;
						font-size: var(--theme-lg);
						line-height: var(--theme-lg-line);
					}
					.bottom{
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						.code{
							color: #606060;
						}
					}
					.total{
						flex: 1;
						display: flex;
						justify-content: flex-end;
						gap: 8rpx;
						font-size: var(--theme-lg);
						line-height: var(--theme-lg-line);
						.total-points{
							font-size: 40rpx;
							font-weight: 600;
							color: #FF0D0D;
							&::after{
								content: "积分";
								font-size: 60%;
							}
						}
						.total-price {
							font-size: 40rpx;
							font-weight: 600;
							color: #FF0D0D;
							&::before{
								content: "¥";
								font-size: 60%;
							}
						}
					}
				}
			}
			.popup-bottom{
				height: 112rpx;
				padding: 16rpx 24rpx;
				background-color: #FFFFFF;
				border-top: 2rpx solid #D7DBE1;
			}
		}
	}
</style>